<template>
    <li class="conponent-item-course">
        <p>{{info.created}}</p>

        <h3 @click="viewDetail()">{{info.title}}</h3>

        <p v-if="info.detail">
            {{limitLength(info.detail)}}
        </p>

        <p>
            <span v-for="tag in info.tags" class="tag">{{tag}}</span>
            <span v-if="info.view>0">阅读 {{info.view}}</span>
        </p>
    </li>
</template>

<script>
    module.exports = {
        props: {
            info: {
                coerce: function (info) {
                    return {
                        created: info.created || '1970-01-01',
                        title: info.title || '无题',
                        tags: info.tags && info.tags.split('#') || [],
                        view: info.view || 0,
                        id: info.id
                    }
                }
            },
            link: String
        },
        methods: {
            viewDetail: function () {
                router.go({name: this.link, params: {id: this.info.id}});
            },
            limitLength: function (detail) {
                if (detail.length > 40) {
                    return detail.substr(0, 40) + '...';
                } else {
                    return detail
                }
            }
        }
    }
</script>